import React from 'react'
// ===================================================================== antd
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons'
// ===================================================================== Temp
import FormModal from '#cpt/temp/FormModal'
// ===================================================================== global declare
const { $Lazy, $http, $fn } = window
// ===================================================================== antd
const Button 	= $Lazy.load(()=>import('@antd/button'))
const Input 	= $Lazy.load(()=>import('@antd/form/input'))
const Title  	= $Lazy.load(()=>import('#tp/title/title'))
const $cache 	= $Lazy.file(()=>import('#private/cache-api'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		data:[],
		pag: {},
		selectedKeys:[],
		selectedRows: [],
		// 提交表单列表
		formData : [
			{ label: '仪器名称',					name: 'device_id', 			half:true, required:true, type:'select', onValue:({value})=>{
				$http.submit(null,'device/info', { param:{uuid:value}, isPull:true }).then(data=>{
					this.formRef.setValue(data)
				})
			}},
			{ label: '仪器编号',  				name: 'device_number', 		half:true, disabled:true },
			{ label: '设备类型',  				name: 'device_type_name', 	half:true, disabled:true },
			{ label: '生产厂家',  				name: 'serial_man', 		half:true, disabled:true },
			{ label: '仪器型号',  				name: 'device_model', 		half:true, disabled:true },
			{ label: '使用科室',  				name: 'depart_name', 		half:true, disabled:true },
			{ label: '启用日期',  				name: 'enabeld_date', 		half:true, disabled:true, type:'date-time' },
			{ label: '设备理论每小时产能',  		name: 'estimate_num', 		half:true },
			{ label: '设备实际单位每小时产能',  	name: 'actual_num', 		half:true },
		],
		// 性能参数
		paramData: []
	}
	
	model = {}
	
	componentDidMount(){
		
	}
	
	open = kind_id => {
		this.modal.open({ formRef: this.formRef })
		this.submit = { kind_id }
		
		this.getModalSelect()
	}
	// 获取弹框下拉
	getModalSelect = async () => {
		const { formData } = this.state
		$fn.setModalRows(formData, [ 'device_id' ], ()=>{
			$cache.then( async f => {
				// 获取设备名称
				$fn.setRow( formData, 'device_id', await f.getDivCache())
				//
				this.setState({ formData })
			})
		})
	}
	
	// 添加性能参数
	addParams = () => {
		const { paramData } = this.state
		paramData.push({ title:'验证指标名称', num:'参考数' })
		this.setState({ paramData })
	}
	// 删除
	onDel = index => {
		const { paramData } = this.state
		paramData.splice(0,1)
		this.setState({ paramData })
	}
	
	render(){
		const {  paramData } = this.state
		
		return FormModal.call(this,{ 
			title: '添加仪器信息', labelWidth:'s12', width:'95%', height:'95%', scroll:true, api:'de-rel-kind/add', 
			getSubmit:()=> {
				// 性能参数
				const perf_param = paramData.map(({name, value})=> ({ name, value})) 
				return { perf_param }
			},
			close: () => this.setState({ paramData: [] }),
			suffix: (
				<>
					<Title title='性能参数' suffixClassName='pb5'>
						<Button size='middle' width={120} onClick={this.addParams}>
							<PlusOutlined /> <span>添加</span>
						</Button>
					</Title>
					
					<ul className='mt10 f12' style={{width:'50%'}}>
						{
							paramData.map((v,i)=>(
								<li key={i} className='mb10 fxm'>
									<div className='nowrap mr10'>{v.title}:</div>
									<div className='ex'><Input size='middle' outer onChange={value=> v.name = value } /></div>
									<div className='nowrap ml20 mr10'>{v.num}:</div>
									<div className='mr20 ex'><Input size='middle' outer onChange={value=> v.value = value } /></div>
									<Button size='middle' ghost danger onClick={i=>this.onDel(i)}><DeleteOutlined /> <span>删除</span></Button>
								</li>
							))
						}
					</ul>
				</>
			)
		})
	}
}

export default Index